<template>
  <view class="content bg-white">
    <uv-navbar height="100rpx" placeholder :autoBack="false" border>
      <template v-slot:left>
        <view class="flex">
          <uv-avatar :src="userInfoStore.userInfo.avatar"/>
          <view class="flex flex-column m-l-20">
            <text>{{ userInfoStore.userInfo.name }}</text>
            <text class="font-24">用户编号{{ userInfoStore.userInfo.id }}</text>
          </view>
        </view>
      </template>
      <template v-slot:right>
        <view class="flex align-center position-relative">
          <uv-icon @click="transionShow = !transionShow" name="plus" size="40rpx"/>
          <uv-transition :show="transionShow" class="transition" @change="">
            <view class="list">
              <view @click="skip.navigateTo('/pages/room/room')">创建房间</view>
              <view @click="joinRoom">加入房间</view>
            </view>
          </uv-transition>
        </view>
      </template>
    </uv-navbar>
    <uv-swipe-action>
      <uv-swipe-action-item @click="operationSession($event,item)" :options="getOptions(item.isTop)" v-for="item in rongCloud.conversationList" :index="item.targetId" :show="item.show">
        <view class="swipe-action uv-border-bottom">
          <view class="swipe-action__content" :class="{'isTop':item.isTop }">
            <view class="flex align-center"  @click="goPrivateChat(item)">
              <uv-avatar :src="item.userInfo.avatar"/>
              <view class="m-l-20 flex flex-column justify-between flex-1">
                <view class="flex align-center justify-between">
                  <text>{{ item.userInfo.name }}</text>
                  <text class="font-24 color-808080">{{ transformTime(item.latestMessage?.sentTime || item.conversation.latestMessage.sentTime) }}</text>
                </view>
                <text class="font-24 color-808080">{{ item.latestMessage?.content.content || item.conversation.latestMessage.content.content }}</text>
              </view>
            </view>
          </view>
        </view>
      </uv-swipe-action-item>
    </uv-swipe-action>
  </view>
</template>

<script setup lang="ts">
import {onLoad} from "@dcloudio/uni-app";
import {ref} from "vue";
import {skip, transformTime} from "@/utils/utils";
import {rongCloudStore} from "@/store/modules/rongcloud";
import {userStore} from "@/store/modules/user";

const userInfoStore = userStore()
const rongCloud = rongCloudStore()
const transionShow = ref(false) // transition组件显示状态
const list = ref([]) // 会话列表

const getOptions = (isTop:boolean) => {
 return [{
   text: isTop ? '取消置顶' : '置顶',
   style: {
     backgroundColor: '#3c9cff'
   }
 }, {
   text: '删除',
   style: {
     backgroundColor: '#f56c6c'
   }
 }]
}

// 操作会话 // 0:置顶 1:删除
const operationSession = (e:any,item:any) => {
  e.index === 0 ? rongCloud.topSession(item) : rongCloud.removeSession(item.targetId)
}

// 去私聊
const goPrivateChat = (item:any) => {
  uni.navigateTo({
    url: `/pages/privateChat/privateChat?id=${item.targetId}&name=${item.userInfo.name}`
  })
}

// 加入群聊
const joinRoom = () => {
  uni.showModal({
    title: '请输入群聊ID',
    content: '',
    editable: true,
    success: (res) => {
      if (res.confirm) {
        skip.navigateTo('/pages/room/room?id=' + res.content)
      }
    }
  })
}

onLoad(()=>{
  uni.$on('updataConversation',(conversationList)=>{
    rongCloud.sessionList(conversationList,true)
  })
})

</script>

<style lang="scss" scoped>
.swipe-action {
  &__content {
    padding: 20rpx;
    &.isTop{
      background: #F5F5F5;
    }
    &__text {
      font-size: 15px;
      color: #222;
      padding-left: 30rpx;
    }
  }
}
.transition{
  position: absolute;
  width:200rpx;
  background-color:#4c4c4c;
  right:-26rpx;
  top:70rpx;
  border-radius:16rpx;
  color:#ededed;
  .list{
    text-align: center;
    font-size: 24rpx;
    view{
      padding: 20rpx;
    }
  }
  &::before{
    content: '';
    position: absolute;
    right: 26rpx;
    top: -10rpx;
    transform: translateY(-50%);
    border: 20rpx solid transparent;
    border-bottom-color: #4c4c4c;
  }
}
</style>
